import { ProList } from '@ant-design/pro-components';
import { Badge, Tag, Typography } from 'antd';
import { LowStockMaterial } from '../../types';

interface LowStockMaterialListProps {
  data: LowStockMaterial[];
}

export default function LowStockMaterialList({ data }: LowStockMaterialListProps) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <Typography.Title level={5} style={{ marginBottom: '12px' }}>库存预警物资</Typography.Title>
      <div style={{ flex: 1, overflow: 'auto' }}>
        <ProList<LowStockMaterial>
          pagination={false}
          dataSource={data}
          ghost
          rowKey="id"
          size="small"
          split={true}
          style={{ height: '100%' }}
          metas={{
            title: {
              dataIndex: 'materialName',
              render: (text, record) => (
                <Typography.Text>
                  {text} <Tag color="blue">{record.categoryName}</Tag>
                </Typography.Text>
              ),
            },
            subTitle: {
              render: (_, record) => (
                <Badge status="error" text={`缺少 ${record.shortage} ${record.unit}`} />
              ),
            },
            description: {
              render: (_, record) => (
                <span>
                  当前库存：
                  <Typography.Text type="danger">
                    {record.quantity} {record.unit}
                  </Typography.Text>
                  <span style={{ marginLeft: 8 }}>
                    最低库存：
                    <Typography.Text type="secondary">
                      {record.minQuantity} {record.unit}
                    </Typography.Text>
                  </span>
                </span>
              ),
            },
          }}
        />
      </div>
    </div>
  );
}